import styled from 'styled-components';
import React, { CSSProperties, useState, useEffect } from 'react';
import { Card, Modal, Result } from 'antd';
import { TableOutlined, ClusterOutlined, ShareAltOutlined, SisternodeOutlined, ExportOutlined, ExceptionOutlined, ConsoleSqlOutlined, NodeIndexOutlined, ApartmentOutlined, PartitionOutlined, ProfileOutlined } from '@ant-design/icons';
import { confirm } from '@tauri-apps/plugin-dialog';

import { SqlQuery, TableContent, TableInfor, TableRelations, TableStructure, TableTiggers, ToolsHeader } from '@/components';
import { transformDomainClear, transformDomainDelete } from '@/services/local';
import { ConnectorDataSource } from '@/services';

export interface DatabasePanelProps {
    style?: CSSProperties;
    dataSource: ConnectorDataSource;
    table?: string;
    onTableChange?: () => Promise<void>;
}

export const DatabasePanel: React.FC<DatabasePanelProps> = (props) => {

    const [action, setAction] = useState<string>('对象');

    const [isModalOpen, setIsModalOpen] = useState(false);

    const [selected, setSelected] = useState<any | null>(null);

    console.log('-----------------', props.dataSource);

    return (
        <Container style={props.style}>
            <Header>
                <ToolsHeader
                    activeKey={action}
                    leftItems={[
                        {
                            key: 'structure',
                            label: '结构',
                            icon: <ApartmentOutlined />,
                        },
                        {
                            key: 'content',
                            label: '数据',
                            icon: <TableOutlined />,
                        },
                        {
                            divider: true,
                        },
                        {
                            key: 'relations',
                            label: '关联',
                            icon: <ClusterOutlined />,
                            disabled: true,
                        },
                        {
                            key: 'triggers',
                            label: '触发器',
                            icon: <SisternodeOutlined />,
                            disabled: true,
                        },
                        {
                            key: 'tableinfor',
                            label: '信息',
                            icon: <ExceptionOutlined />,
                        },
                    ]}
                    centerItems={[
                        {
                            key: 'query',
                            label: '查询',
                            icon: <ConsoleSqlOutlined />,
                        },
                    ]}
                    rightItems={[
                        {
                            key: '逆向',
                            label: '逆向',
                            icon: <ExportOutlined />,
                            disabled: true,
                        },
                        {
                            key: '代码',
                            label: '代码',
                            icon: <ShareAltOutlined />,
                            disabled: true,
                        }
                    ]}
                    onChange={async (key: string, isAction?: boolean) => {
                        if (isAction) {
                            //删除
                            if (key === '清空') {
                                //提示框
                                const confirmed2 = await confirm('确定要清空该域下所有内容吗？', { title: '清空域', kind: 'warning' });
                                if (confirmed2) {
                                    //
                                    let result = await transformDomainClear([]);
                                    if (result) {
                                        props.onTableChange && props.onTableChange();
                                    }
                                }
                            } else if (key === '删除') {
                                //
                                const confirmed2 = await confirm('确定要删除该域吗？', { title: '删除域', kind: 'warning' });
                                if (confirmed2) {
                                    //
                                    let result = await transformDomainDelete([]);
                                    if (result) {
                                        props.onTableChange && props.onTableChange();
                                    }
                                }
                            } else if (key === '编辑') {
                                //
                                // let domain = await metaDataGetMetaDomain(props.domainIdentifier);
                                // setSelected(domain);
                                // setIsModalOpen(true);
                            }
                        } else {
                            setAction(key);
                        }
                    }}></ToolsHeader>
            </Header>
            <Modal
                styles={{
                    content: {
                        minWidth: '600px',
                        minHeight: '400px'
                    }
                }}
                title="编辑域"
                footer={false}
                destroyOnClose={true}
                open={isModalOpen}
                onOk={async () => {
                    //刷新
                    setIsModalOpen(false);
                }} onCancel={async () => {
                    //刷新
                    setIsModalOpen(false);
                }}>
                {/* <DomainEditor item={selected} onFinish={async () => {
                    //刷新
                    props.onDomainChange && await props.onDomainChange(props.domainIdentifier);
                    setIsModalOpen(false);
                }}></DomainEditor> */}
            </Modal>
            <>
                {
                    action === 'content' && props.table && <TableContent dataSource={props.dataSource} table={props.table}></TableContent>
                }
                {
                    action === 'tableinfor' && props.table && <TableInfor dataSource={props.dataSource} table={props.table}></TableInfor>
                }
                {
                    action === 'relations' && props.table && <TableRelations dataSource={props.dataSource} table={props.table}></TableRelations>
                }
                {
                    action === 'structure' && props.table && <TableStructure dataSource={props.dataSource} table={props.table}></TableStructure>
                }
                {
                    action === 'triggers' && props.table && <TableTiggers dataSource={props.dataSource} table={props.table}></TableTiggers>
                }
                {
                    action === 'query' && <SqlQuery dataSource={props.dataSource} ></SqlQuery>
                }
            </>
        </Container>
    );
}


const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;

const Header = styled.div`
    height: 45px;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DEDEDE;
    display: flex;
`;
